<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!-- jQuery -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        
        <!-- jcarousel -->
        <link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
        <script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>
        
        <!-- fancybox -->
        <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />
        <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
        
        <style>
            #wrapper {
                position: absolute;
                width: 330px;
                height: 120px;
                margin: auto;
                padding: 20px;
                top: 0px;
                right: 0px;
                bottom: 0px;
                left: 0px;
                box-shadow: 0px 0px 4px 0px #aaa;
            }
            
            #mycarousel img {
                border: 0px;
            }
        </style>
        
        <script>
            /**
             * main
             */
            jQuery(document).ready(function() {
                jQuery("#mycarousel").jcarousel({
                    scroll: 1,
                    auto: 1,
                    wrap: "circular",
                    initCallback: onInitCarousel
                });
            });
            
            /**
             * サポートされているファイル形式を取得
             */
            var AUDIO_EXT = (function(){
                var audio = new Audio();
                var ext = "";
                if      (audio.canPlayType("audio/ogg") == 'maybe') { ext="ogg"; }
                else if (audio.canPlayType("audio/mp3") == 'maybe') { ext="mp3"; }
                else if (audio.canPlayType("audio/wav") == 'maybe') { ext="wav"; }
                
                return ext;
            })();
            
            /**
             * carousel 後の初期化
             */
            var onInitCarousel = function(carousel) {
                // #mycarousel 内にある a タグを fancybox 化
                jQuery("#mycarousel a").fancybox({
                    "overlayShow"   : true,
                    "transitionIn"  : "elastic",
                    "transitionOut" : "elastic",
                    "onStart"       : function() { carousel.stopAuto(); },  // fancybox 開始時
                    "onClosed"      : function() { carousel.startAuto(); }  // fancybox 終了時
                });
                
                // オーディオタグを生成
                var se = new Audio("se/img-hover." + AUDIO_EXT);
                // #mycarousel 内にある a タグにマウスを乗せた際のイベントを登録
                // http://tmlife.net/programming/javascript/html5-audio-javascript.html
                jQuery("#mycarousel a").hover(function(){
                    // sound 再生
                    se.play();
                });
            };
            
        </script>
    </head>
    <body>
        <h1></h1>
        <section id="wrapper">
            <ul id="mycarousel" class="jcarousel-skin-tango">
                <li><a href="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
                <li><a href="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
                <li><a href="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
                <li><a href="http://static.flickr.com/77/199481108_4359e6b971_s.jpg"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
                <li><a href="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
                <li><a href="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
                <li><a href="http://static.flickr.com/58/199481218_264ce20da0_s.jpg"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
                <li><a href="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
                <li><a href="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
                <li><a href="http://static.flickr.com/70/229228324_08223b70fa_s.jpg"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></a></li>
            </ul>
        </section>
    </body>
</html>
